<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery.min.js"></script>
      
        <style>
            div{
                box-sizing: border-box;  /** 边框是算作宽高的一部分**/
                /* box-sizing: content-box; */  /** 边框是+宽高是实际的 宽高**/
                border: solid 5px red;
                height: 200px;
                width: 400px;
				position: absolute;
				top: 200px;
				left: 200px;
				cursor: pointer;
				background-color: aqua;
            }    

        </style>
		<script>
		    $(function(){
		       $("#btnHide").click(()=>{
					$("div").hide(3000);
			   })
			   
			   $("#btnShow").click(()=>{
			   		$("div").show(3000);
			   }) 
			   
			   
			   $("#btnSlideUp").click(()=>{
			   		$("div").slideUp(3000);
			   })
			   
			   
			   $("#btnSlideDown").click(()=>{
			   		$("div").slideDown(3000);
			   })
			   
			   
			   
			   $("#btnFadeIn").click(()=>{
			   		$("div").fadeIn(3000);
			   })
			   
			   $("#btnFadeOut").click(()=>{
			   		$("div").fadeOut(3000);
			   })
			   
			   
			   $("#btnToggleFade").click(()=>{
			   		$("div").fadeToggle(2000);
			   })
			   
			   $("#btnAnn").click(()=>{
			  //  		$("div").fadeOut(3000,function(){
					// 	$("div").fadeIn(3000);
					// })
					
					$("div").fadeOut(3000).fadeIn(3000);
			   })
			   
			   
		    })
		
		
		</script>
    </head>
    <body>

		<button id="btnHide">隐藏</button>
		<button id="btnShow">显示</button>
		
		
		<button id="btnSlideUp">btnSlideUp</button>
		<button id="btnSlideDown">btnSlideDown</button>
		
		
		<button id="btnFadeOut">淡出</button>
		
		<button id="btnFadeIn">淡入</button>
		
		
		
		<button id="btnToggleFade">淡入/淡出</button>
		<button id="btnAnn">动画</button>

        <div >   </div>


    </body>
</html>
